<template>
	<view class="dailyService_swiper" >
		<swiper 
			class="dailyService_swiper_content"
			:current="dailyServiceCurrent"
			next-margin="270rpx"
			circular
			:indicator-dots='false'
			@change='changeDailyService'
		>
			<swiper-item
				v-for="item in dailyService"
				:key="item.id"
				
				@tap="toDailyServiceDetail(item.id)"
			>
				<view class="swiper-item">
					<image :src="item.coverPic" mode=""></image>
					<view class="xjs-line-two">
						{{ item.title }}
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="dots">
			<view v-for="(item,index) in dailyService" :class="currentDailyService==index?'active':''" :key="index+'dots'"></view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { watch } from 'vue';
import {ref} from 'vue'
const props:any = defineProps(['list'])

const dailyService = ref([]) //服务日常数据列表
//轮播图
const currentDailyService = ref<number>(0)
const dailyServiceCurrent = ref<number>(0) //服务日常轮播图
const changeDailyService = (e:any) =>{
	currentDailyService.value = e.detail.current
}
//去日常详情
const toDailyServiceDetail = (id: string) => {
	uni.navigateTo({
		url: '/pages/studio/dailyServiceDetail/index?id=' + id
	})
}

watch(()=>props.list,(newval)=>{
	dailyService.value = newval.map(item=>{
		item.coverPic = item.coverPic.split(',')[0]
		return item
	})
},{deep:true,immediate:true})

</script>

<style lang="scss" scoped>
.dailyService_swiper {
	height: 540rpx;
	margin-top: 48rpx;
	position: relative;
	.dailyService_swiper_content{
		height: 504rpx;
	}
}
.dots{
	position: absolute;
	bottom: 0;left: 0;right: 0;
	margin: auto;
	@include flex(center,center);
	view{
		width: 8rpx;
		height: 8rpx;
		background: #CCCCCC;
		border-radius: 50%;
		margin-right: 4rpx;
		&:last-child{
			margin: 0;
		}
	}
	.active{
		width: 32rpx;
		background: #FF6084;
		border-radius: 200rpx;
	}
}
.swiper-item {
	width: 400rpx;
	// height: 564rpx;
	padding-bottom: 24rpx;
	border-radius: 24rpx;
	background-color: #fff;
	image {
		width: 400rpx;
		height: 400rpx;
		border-radius: 24rpx 24rpx 0 0;
	}
	view {
		width: 400rpx;
		color: #1b2120;
		height: 80rpx;
		overflow: hidden;
		font-size: 30rpx;
		line-height: 40rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
	}
}
</style>